<template>
  <div class="superpersonbox flex-center" style="">
    <div class="swipertext">
      <div class="swipertext_item flex-a-c " id='navv'>
        <div class="swipertext_item_text flex-a-c" id="tabsContainer" v-for="i in 34">
          <img src="../assets/coll.jpg" style="width: 44px; height: 44px; margin-right: 10px;" alt="" />
          美妆达人
        </div>
      </div>
      <div class="swipertext_item flex-a-c " id='nav'>
        <div class="swipertext_item_text flex-a-c" id="tabsContainer" v-for="i in 34">
          <img src="../assets/coll.jpg" style="width: 44px; height: 44px; margin-right: 10px;" alt="" />
          美妆达人
        </div>
      </div>
      <div class="swipertext_item">

      </div>
    </div>

    <div class="joinone">
      <div class="flex-center" style="margin-bottom: 40px;">
        <img src="../assets/liucheng.png" class="liuchengimg" alt="" />
        <p style="font-size: 30px;">入驻流程</p>
      </div>
      <div class="bevlogerbox flex-between">
        <div class="bevloger_item">
          <img src="../assets/women.jpg" class="womenimg" alt="" />
          <p style="font-size: 18px;">成为达人</p>
          <p style="font-size: 14px; width: 200px; margin-top: 10px;">多样化品牌合作邀请，时间灵活，一份自由收入</p>
        </div>
        <el-steps direction="vertical" :active="1">
          <el-step title="注册成为CouponCrush用户" description="使用手机注册CouponCrush 账号"></el-step>
          <el-step title="发布3篇笔记" description="发布3片优质博主笔记"></el-step>
          <el-step title="完成涨粉" description="涨粉10位即可升级为博主，开始营业"></el-step>
        </el-steps>
      </div>
    </div>

    <div class="advantage ">
      <p class="flex-center" style="font-size: 30px;">入驻优势</p>
      <p class="flex-center" style="color: rgba(0, 0, 0, .45); font-size: 20px;margin-top: 10px;">一切变得简单明了</p>
      <div style="margin-top: 40px;" class="rz_advantage ">
        <div class="flex-center column">
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;">本地资源</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;">
            针对加拿大本地用户群体，能够让您的内容在本地广泛传播，精准曝光，拓展本地的影响力。
          </p>
        </div>
        <div class="flex-center column">
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;">IP打造</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;">
            我们将与您共同打造您的IP，提供全方位的孵化和推广服务，让您的IP得以最大化地展现和传播。
          </p>
        </div>
        <div class="flex-center column">
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;">合作机会</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;">
            在我们的平台上，您将有机会与其他优秀的创作者进行合作、交流，分享经验、学习成长，拓展人脉和合作机会。
          </p>
        </div>
      </div>
      <div style="margin-top: 40px;" class="rz_advantage">
        <div class="flex-center column">
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;">经济收益</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;">
            我们为优秀的达人提供合理的稿酬和激励机制，让您的创作不仅能够得到认可，还能够实现经济收益。
          </p>
        </div>
        <div class="flex-center column">
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;">官方扶持</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;">
            流量赋能商业化内容无限流。
          </p>
        </div>

      </div>
    </div>

    <div class="different flex-center column">
      <p style="font-size: 30px;">博主和达人的区别？</p>
      <div class="different_content flex-a-c">
        <div class="different_content_left">
          <div class="different_content_left_text">
            <span class="tips">达人</span>
            <p style="font-size: 24px; margin: 32px 0 20px;">内容类型区别</p>
            <p class="halfblack" style="font-size: 20px;">
              达人的内容类型更垂直，往往是特定领取的专业知识或技能分享，内容以构建个人人设，商业价值转化为主。
            </p>
            <p style="font-size: 24px; margin: 20px 0;">商业化程度区别</p>
            <p class="halfblack" style="font-size: 20px;">
              达人的商业化形式更多样化，除了通过广告、赞助等方式外，更可以通过销售自己的产品或服务、举办活动、提供咨询等方式获得收入。
            </p>
          </div>
          <img src="../assets/leftrole.jpg" class="leftroleimg" alt="" />
        </div>
        <img src="../assets/vs.jpg" class="vsimg" alt="" />
        <div class="different_content_right">
          <img src="../assets/rightrole.jpg" class="leftroleimg" alt="" />
          <div class="different_content_left_text" style="margin-left: 20px;">
            <span class="tips">博主</span>
            <p style="font-size: 24px; margin: 32px 0 20px;">内容类型区别</p>
            <p class="halfblack" style="font-size: 20px;">
              博主则更专注于创作和分享生活日常，兴趣导向偏多，有一定的传播能力和影响力，通过高质量的内容创作引导读者的消费决策。
            </p>
            <p style="font-size: 24px; margin: 20px 0;">商业化程度区别</p>
            <p class="halfblack" style="font-size: 20px;">
              博主则是更通过广告、赞助、推广等方式获得收入。
            </p>
          </div>
        </div>
      </div>
      <div class="what_is flex-a-c ">
        <div class="super_person_content">
          <p class="super_person_content_title">什么是内容达人？</p>
          <div class="contentbox">
            <p class="left_tips">内容达人</p>
            <p class="contentitem">
              在特定领域上制作、发布高质量内容的人士。或社交媒体上的意见领袖。内容达人致力于提供有价值、有吸引力的内容。
            </p>
          </div>
          <div class="contentbox">
            <p class="left_tips">优势</p>
            <p class="contentitem">
              在平台内，达人更是可以通过优质且专业的相关领域的知识分享，增加用户信赖。建立专业的IP (人设背书)。
            </p>
          </div>
        </div>
        <div class="super_person_content" style="margin-left: 83px;">
          <p class="super_person_content_title">什么是服务达人？</p>
          <div class="contentbox">
            <p class="left_tips">服务达人</p>
            <p class="contentitem">
              指的是提供高质量服务的个人或机构。可能是专业人士，如律师、医生、设计师、咨询顾问等；也可能是拥有某一技能的个人，如房屋修理、管道管理、家政清洁服务等
            </p>
          </div>
          <div class="contentbox">
            <p class="left_tips">优势</p>
            <p class="contentitem">
              服务达人可以平台展示自己的专业知识和技能。通过教程、案例分析、专业建议等，可以向观众展示自己的专业水平和经验，从而吸引需求用户关注。
            </p>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'Nuxtsuperperson',
    data() {
      return {

      }
    },
    mounted() {
      console.log('我是moun');
      this.scrollInit();
      this.scrollInitv();

    },
    methods: {
      scrollInit() {
        // 获取要绑定事件的元素
        const nav = document.getElementById("nav")
        var flag; // 鼠标按下
        var downX; // 鼠标点击的x下标
        var scrollLeft; // 当前元素滚动条的偏移量
        nav.addEventListener("mousedown", function(event) {
          flag = true;
          downX = event.clientX; // 获取到点击的x下标
          scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
        });
        nav.addEventListener("mousemove", function(event) {
          if (flag) { // 判断是否是鼠标按下滚动元素区域
            var moveX = event.clientX; // 获取移动的x轴
            var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
            this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
            console.log(scrollX)
          }
        });
        // 鼠标抬起停止拖动
        nav.addEventListener("mouseup", function() {
          flag = false;
        });
        // 鼠标离开元素停止拖动
        nav.addEventListener("mouseleave", function(event) {
          flag = false;
        });
      },
      scrollInitv() {
        // 获取要绑定事件的元素
        const nav = document.getElementById("navv")
        var flag; // 鼠标按下
        var downX; // 鼠标点击的x下标
        var scrollLeft; // 当前元素滚动条的偏移量
        nav.addEventListener("mousedown", function(event) {
          flag = true;
          downX = event.clientX; // 获取到点击的x下标
          scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
        });
        nav.addEventListener("mousemove", function(event) {
          if (flag) { // 判断是否是鼠标按下滚动元素区域
            var moveX = event.clientX; // 获取移动的x轴
            var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
            this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
            console.log(scrollX)
          }
        });
        // 鼠标抬起停止拖动
        nav.addEventListener("mouseup", function() {
          flag = false;
        });
        // 鼠标离开元素停止拖动
        nav.addEventListener("mouseleave", function(event) {
          flag = false;
        });
      },
    }

  }
</script>

<style>
  .superpersonbox {
    background-color: #F7F0FE;
    width: 100%;
    flex-direction: column;
  }

  .joinone {
    margin: 40px 0;
    background-color: #fff;
    width: 1437px;
    padding: 60px 0px 80px 0px;
    box-sizing: border-box;
    border-radius: 20px;
  }

  .liuchengimg {
    width: 24px;
    height: 24px;
  }

  .bevlogerbox {
    margin: 0 auto;
    width: 842px;
    height: 324px;

    .bevloger_item {
      background: url('../assets/joininbg.jpg');
      background-size: cover;
      width: 266px;
      height: 266px;
      position: relative;
      padding: 21px 28px;
      color: #fff;

      .womenimg {
        width: 104px;
        height: 183px;
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }

  .store_join_left {
    .sixblock {
      width: 358px;
      height: 230px;
      background: url('/assets/map.jpg');
      background-size: cover;
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      .sixitem {
        img {
          width: 56px;
          height: 56px;
        }

        >p {
          margin-top: 4px;
          font-size: 12px;
        }
      }
    }
  }

  .advantage {
    margin: 40px 0;
    background-color: #fff;
    width: 1440px;
    padding: 100px 0px;
    box-sizing: border-box;
    border-radius: 20px;
  }

  .ballimg {
    width: 75px;
    height: 75px;
  }

  .rz_advantage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
  }

  ::-webkit-scrollbar {
    width: 5px;
    background-color: white;
    height: 5px;
    display: none;
  }

  /*  ::-webkit-scrollbar-thumb {
    background-color: #f16174;
  } */

  .swipertext {
    padding: 0px 0 8px;
    background-color: #D95667;
    width: 100%;

    .swipertext_item {
      margin-top: 60px;
      overflow-x: auto;
      overflow-y: hidden;

      .swipertext_item_text {
        border-radius: 30px;
        border: 1px #FFF;
        background: rgba(255, 255, 255, 0.80);
        padding: 8px 24px;
        margin-left: 40px;
        flex: 0 0 auto;

      }
    }
  }

  .different {
    margin: 40px auto;
    width: 1440px;
    padding: 100px 0px;
    background-color: #fff;
    border-radius: 20px;

    .different_content {
      position: relative;
      width: 1345px;
      margin: 40px auto 120px;

      .different_content_left {
        display: flex;
        padding: 50px 36px;
        background: url('../assets/superbgr.jpg');
        width: 700px;
        height: 504px;
        background-size: 100% 100%;
        position: relative;

        .leftroleimg {
          width: 180px;
          height: 367px;
          right: 20px;
          top: 68px;
        }

        .different_content_left_text {
          width: 365px;
        }
      }

      .different_content_right {
        display: flex;
        padding: 50px 36px;
        background: url('../assets/superbgl.jpg');
        width: 700px;
        height: 504px;
        background-size: 100% 100%;
        position: relative;

        .leftroleimg {
          width: 180px;
          height: 367px;
          left: 50px;
          top: 68px;
        }
      }

      .tips {
        color: #fff;
        border-radius: 22px;
        background: #F83A3A;
        padding: 4px 16px;
      }

      .vsimg {
        width: 120px;
        height: 120px;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        z-index: 2;
      }
    }
  }

  .what_is {
    .super_person_content {
      width: 564px;

      .super_person_content_title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 8px;
      }

      .contentbox {
        margin-top: 32px;
        height: 160px;
        position: relative;
        background-color: #FDF2F0;
        padding: 46px 32px 20px;
        border-radius: 12px;

        .left_tips {
          position: absolute;
          left: 0;
          top: 0;
          padding: 2px 24px;
          background-color: #F83A3A;
          border-radius: 0 12px 0 12px;
          color: #fff;
        }

        .contentitem {
          font-size: 20px;
          color: #9E0022;
        }
      }
    }
  }
</style>
